<template>
    <div class="teacher">
        <!-- <headerView ref="header" systemName="统一身份认证平台" /> -->
        <div class="app-table">
            <div class="app-body">
                <div class="app-separator">
                    <el-breadcrumb separator="/">
                        <!-- <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item> -->
                        <el-breadcrumb-item
                            :to="{ path: '/noticeIndexView/noticePublishListView' }"><a>通知列表</a></el-breadcrumb-item>
                        <el-breadcrumb-item><a>通知详情</a></el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-divider></el-divider>
                <div class="detail">
                    <div class="title">{{ article.title }}</div>
                    <div class="sub-title">{{ article.publishDate }}</div>

                    <div class="content" v-html="article.content"></div>
                </div>
            </div>
        </div>
        <bottomView />
    </div>
</template>
<script>
import headerView from "@/components/header.vue";
import bottomView from "@/components/bottom.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
    name: "ArticleList",
    data() {
        return {
            article: {},
            queryId: '',
        };
    },
    mounted() {
        // this.$refs.header.systemName = "统一身份认证平台";
        // this.$refs.header.homeIndexName = "Index";
        //   this.getListArticle();
        if (this.$route.query.id != undefined) {
            this.queryId = this.$route.query.id
            this.queryNotice(this.queryId)
        }
    },

    components: {
        headerView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage,
        bottomView,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    methods: {
        queryNotice(id) {
            httpService(
                "/javaApi/messages/queryById",
                { id: id },
                "get"
            ).then((data) => {
                console.log(data);
                this.article = data;
            });
        },
    },
};
</script>

<style>
.el-divider--horizontal {
    margin-top: 0;
    width: 100%;
}

.detail .title {
    font-size: 20px;
}

.detail td {
    border: 1px solid #dedede;
}

.detail table {
    text-align: center;
    margin: 0 auto;
}

.detail .sub-title {
    font-size: 16px;
    padding: 10px;
    color: #888888;
}

.detail {
    min-height: calc(100vh - 370px);
    text-align: center;
}

.content {
    width: 70%;
    margin: 0 auto;
    text-align: left;
}

.content img {
    width: 100%;
    height: auto;
}

.app-table {
    background: #eff3f5;
    padding: 10px;
}

.app-search {
    margin-left: 10px;
    margin-top: 10px;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.app-body {
    background: white;
    padding: 5px 20px 20px;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
</style>